<template>
  <view class="category-bg">
    <!-- 搜索框 -->
    <view class="search-bar">
      <input
        class="search-input"
        placeholder="请输入服务名称、类别或关键字"
        v-model.trim="searchText"
      />
      <image class="search-icon-img" src="/static/category/search.png"></image>
    </view>
    <view class="main-area">
      <!-- 左侧一级菜单 -->
      <view class="category-side">
        <view
          v-for="(item, idx) in mainCategoryList"
          :key="item.value"
          class="side-item"
          :class="{ active: curMain === idx }"
          @click="switchMain(idx)"
          >{{ item.label }}</view
        >
      </view>
      <!-- 右侧二级菜单 -->
      <view class="category-content">
        <view class="category-grid">
          <!-- 全局搜索模式 -->
          <template v-if="searchText">
            <template v-if="globalFilteredChildren.length">
              <view
                class="category-btn"
                v-for="item in globalFilteredChildren"
                :key="item.value"
                @click="goSubCategory(item)"
              >
                <image
                  v-if="item.icon"
                  :src="item.icon"
                  class="category-icon"
                ></image>
                <text>{{ item.label }}</text>
                <text class="category-group">({{ item.groupLabel }})</text>
              </view>
            </template>
            <template v-else>
              <view style="width: 100%; text-align: center; color: #bbb"
                >未找到相关服务</view
              >
            </template>
          </template>
          <!-- 默认当前主类 -->
          <template v-else>
            <view
              class="category-btn"
              v-for="item in filteredChildren"
              :key="item.value"
              @click="goSubCategory(item)"
            >
              <image
                v-if="item.icon"
                :src="item.icon"
                class="category-icon"
              ></image>
              <text>{{ item.label }}</text>
            </view>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      linkMap: {
        nursingDaily: "/pages/nursingDaily/nursingDaily",
        nursingRecord: "/pages/nursingRecord/nursingRecord",
        outApply: "/pages/outApply/outApply",
        checkoutApply: "/pages/checkoutApply/checkoutApply",
        mealDaily: "/pages/mealDaily/mealDaily",
        mealPick: "/pages/mealPick/mealPick",
      },
      curMain: 0,
      searchText: "",
      mainCategoryList: [
        {
          label: "健康管家",
          value: "nursing",
          children: [
            {
              label: "日常护理",
              value: "nursingDaily",
              icon: "/static/category/nursingDaily.png",
            },
            {
              label: "护理记录",
              value: "nursingRecord",
              icon: "/static/category/nursingRecord.png",
            },
          ],
        },
        {
          label: "客户管理",
          value: "client",
          children: [
            {
              label: "外出申请",
              value: "outApply",
              icon: "/static/category/out.png",
            },
            {
              label: "退住申请",
              value: "checkoutApply",
              icon: "/static/category/checkout.png",
            },
          ],
        },
        {
          label: "点餐服务",
          value: "meal",
          children: [
            {
              label: "每日点餐",
              value: "mealDaily",
              icon: "/static/category/order.png",
            },
            {
              label: "订餐查询",
              value: "mealPick",
              icon: "/static/category/mealPick.png",
            },
          ],
        },
      ],
    };
  },
  computed: {
    filteredChildren() {
      const list = this.mainCategoryList[this.curMain].children;
      if (!this.searchText) return list;
      return list.filter(
        (item) =>
          item.label.includes(this.searchText) ||
          (item.value && item.value.includes(this.searchText))
      );
    },
    globalFilteredChildren() {
      if (!this.searchText) return [];
      const arr = [];
      this.mainCategoryList.forEach((group, groupIdx) => {
        group.children.forEach((item) => {
          if (
            item.label.includes(this.searchText) ||
            (item.value && item.value.includes(this.searchText))
          ) {
            arr.push({
              ...item,
              groupLabel: group.label,
              groupIndex: groupIdx,
            });
          }
        });
      });
      return arr;
    },
  },
  methods: {
    switchMain(idx) {
      this.curMain = idx;
      this.searchText = ""; // 切换主分类时重置搜索
    },
    goSubCategory(item) {
      const url = this.linkMap[item.value];
      if (url) {
        uni.navigateTo({ url });
      } else {
        uni.showToast({ title: `未配置跳转`, icon: "none" });
      }
    },
  },
};
</script>

<style scoped>
.search-icon-img {
  margin-left: -30px;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.category-bg {
  min-height: 100vh;
  background: #f5f7fa;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.search-bar {
  background: #fff;
  padding: 14px 18px 10px 18px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0ebe1;
}
.search-input {
  flex: 1;
  height: 32px;
  border-radius: 16px;
  border: none;
  background: #f5f7fa;
  padding: 0 36px 0 14px;
  font-size: 15px;
  color: #333;
  outline: none;
}
.search-icon {
  margin-left: -30px;
  font-size: 17px;
  color: #c4aa7b;
}
.main-area {
  display: flex;
  flex: 1;
  overflow: hidden;
  background: #fff;
}
.category-side {
  width: 88px;
  background: #faf8f6;
  border-right: 1px solid #f0ebe1;
  display: flex;
  flex-direction: column;
}
.side-item {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #222;
  font-size: 15px;
  border-left: 4px solid transparent;
  background: none;
  cursor: pointer;
  transition: color 0.18s, border 0.18s;
}
.side-item.active {
  color: #faad14;
  font-weight: bold;
  background: #fff;
  border-left: 4px solid #faad14;
}
.category-content {
  flex: 1;
  padding: 16px 8px;
  overflow-y: auto;
}
.category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 6px;
}
.category-btn {
  width: 74px;
  height: 90px;
  background: #fffbe6;
  border-radius: 14px;
  box-shadow: 0 1.5px 6px rgba(252, 211, 149, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.category-btn:active {
  box-shadow: 0 0 1px #faad14;
}
.category-icon {
  width: 38px;
  height: 38px;
  margin-bottom: 6px;
  background: #fff7dd;
  border-radius: 10px;
}
.category-group {
  display: block;
  font-size: 12px;
  color: #faad14;
  margin-top: 2px;
}
</style>
